<template>
  <el-col v-if="label" :span="colSpan" class="description_item">
    <div class="label" :style="labelStyle">
      {{ label }}
    </div>
    <div class="value" :style="valueStyle">
      <slot></slot>
        <template v-if="!$slots.default">
        <template v-if="formatter">{{ formatter(value) }}</template>
        <template v-else>{{value}}</template>
      </template>
    </div>
  </el-col>
</template>
<script>
export default {
  name: "DescriptionItem",
  data() {
    return {};
  },
  props: {
    label: { type: String, default: undefined },
    prop: { type: String, default: "" },
    bold: { type: [Boolean, Number], default: false },
    align: { type: String, default: "right" },
    colSpan: { type: Number, default: 24 },
    labelWidth: { type: String, default: undefined },
    valueStyle: { type: Object, default: undefined },
    customStyle: {
      type: Object,
      default: undefined
    },
    formatter: { type: Function, default: undefined }
  },
  // inject: { model: { default: {} }, formLabelWidth: { default: undefined } },
  inject: ["getData", "formLabelWidth"],
  methods: {},
  computed: {
    isGroup() {
      let parent = this.$parent;
      while (parent) {
        if (parent.$options.componentName !== "DescriptionGroup") {
          parent = parent.$parent;
        } else {
          this._radioGroup = parent;
          return true;
        }
      }
      return false;
    },

    boldValue() {
      if (this.bold) {
        if (typeof this.bold == "boolean") {
          return 700;
        } else if (typeof this.bold == "number") {
          return this.bold;
        }
        return 0;
      }
    },

    labelStyle() {
      var defaultStyle = {};

      if (this.boldValue > 0) {
        defaultStyle = { ...defaultStyle, fontWeight: this.boldValue };
      }
      if (this.align) {
        defaultStyle = { ...defaultStyle, textAlign: this.align };
      }
      if (this.labelWidth || this.formLabelWidth) {
        defaultStyle = {
          ...defaultStyle,
          minWidth: this.labelWidth || this.formLabelWidth
        };
      } else {
        defaultStyle = { ...defaultStyle, minWidth: "70px" };
      }
      if (this.customStyle) {
        defaultStyle = { ...defaultStyle, ...this.customStyle };
      }
      return defaultStyle;
    },
    value() {
      let data = this.getData();
      if (this.prop && data) {
        return data[this.prop];
      }
      return undefined;
    }
  }
};
</script>

<style lang="scss" scoped>
.description_item {
  font-size: 14px;
  margin: 10px;
  padding: 0px 10px;
  line-height: 22px;
  display: flex;

  .label {
    display: inline-block;
    margin-right: 5px;
    color: #606266;

    &::after {
      content: ":";
      margin: 0 8px 0 2px;
      position: relative;
      top: -0.5px;
    }
  }
  .value {
    max-width: 80%;
    display: inline-block;
    color: #303133;
    font-weight: bold;
  }
}
</style>
